﻿@using Utils;
@model WebUI.Models.BuyCreditsViewModel
@{
    ViewBag.Title = "Buy Job Credits";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>Buy Job Credits</h1>
<div class="mainSection">
    <div class="mainCol jp">
        <div class="spacer"></div>
        @using (Html.BeginForm("BuyCredits", "Co", FormMethod.Post, new { ID = "payment-form" }))
        {
            <div class="clear"></div>
            <div class="fl left">Choose Job Package<span>&nbsp; *</span></div>
            <div class="fl right">
                @Html.DropDownListFor(m => m.JobPackageID, Model.JobPackageList)
            </div>
            <div class="clear"></div>
            <div class="fl left left-tip">&nbsp;</div>
            <div class="fl right right-tip">Job posts last 30 days and credits never expire</div>
            <div class="smallspacer"></div>
            <div class="tabsbottom"></div>
                
            <div class="clear"></div>
            <div class="fl left">&nbsp;</div>
            <div class="fl right">
                All major credit cards accepted. Feel free to <a href="/contact">contact us</a> if you have any question<br/>
                <div class="minispacer"></div>
                <img src="/content/images/icon-cc.png"/>
            </div>
                
            <div id="card-error" class="field-validation-error" style="margin-left:180px;padding-bottom:5px;"></div>
                
            <div class="clear"></div>
            <div class="fl left">Credit Card Number<span>&nbsp;*</span></div>
            <div class="fl right">
                <input type="text" size="20" autocomplete="off" class="card-number" />
            </div>
            <div class="minispacer"></div>
                
            <div class="clear"></div>
            <div class="fl left">Expiration (MM/YYYY)<span>&nbsp;*</span></div>
            <div class="fl right">
                <input type="text" size="2" autocomplete="off" class="card-expiry-month" style="width:50px;"/>
                <span> / </span>
                <input type="text" size="4" autocomplete="off" class="card-expiry-year" style="width:90px;"/>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <span style="font-size:110%;">Security Code/CVC<span style="color:Red;"> *</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <input type="text" size="4" autocomplete="off" class="card-cvc" style="width:100px;"/>
            </div>
            <div class="minispacer"></div>
                
            <div class="spacer"></div>
            <div class="tabsbottom"></div>
            <div class="fr">
                <a class="gray-submit" href="/company/joblist">Cancel</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <input type="submit" id="submit-button" name="submit-button" value="Place order" class="blue-submit" />
                    
            </div>
            <div class="smallspacer"></div>
            <div class="fr" id="processingHint">
                <img src="/content/images/spinnerlg.gif"/><div>&nbsp; Processing...</div>
            </div>
        }
    </div>
    <div class="sideCol">
        <div class="spacer"></div>
        <div><strong>Order Details</strong></div>
        <div class="tabsbottom"></div>
        <div id="orderInfo">
            
        </div>
    </div>
    <div class="clear"></div>
</div>

@section FooterContent
{
    <script type="text/javascript" src="@Url.StaticFile("~/content/jquery.form.js")"></script>
    <script type="text/javascript" src="https://js.stripe.com/v1/"></script>
    <script type="text/javascript">
        // this identifies your website in the createToken call below
        var stripePublishableKey = '@GlobalUtilities.GetInstance().StripePublishableKey';
        Stripe.setPublishableKey(stripePublishableKey);
    </script>
    <script type="text/javascript" src="@Url.StaticFile("~/content/jobpayment.js")"></script>
}